import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import React, { useEffect } from "react"

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);


export const useHeartLineEchartHooks = (id, echartData, lineColor) => {

    useEffect(() => {
        let chartDom = document.getElementById(id);

        //如果获取不到元素就不渲染echarts
        if(!chartDom) {return;}
        let myChart = echarts.init(chartDom);
        let option = {
            grid: {
                top: "6%",
                bottom: "12%",
                left:0,
                right: "9%"
            },
            
            color: [lineColor],
            xAxis: {
                type: 'category',
                data: echartData.xAxis,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(0, 0, 0, 0.08)"
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(0, 0, 0, 0.35)",
                        align: "left"
                    }
                },
            },
            yAxis: [
                {
                    type: 'value',
                    position: "right",
                    fontSize: 24,
                    splitLine: {
                        lineStyle: {
                            color: ["rgba(0, 0, 0, 0.15)"],
                            type: "dashed"
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0, 0, 0, 0.08)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(0, 0, 0, 0.35)"
                        }
                    },
                },
                {
                    type: 'value',
                    position: "left",
                    fontSize: 24,
                    splitLine: {
                        lineStyle: {
                            color: ["rgba(0, 0, 0, 0.15)"],
                            type: "dashed"
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0, 0, 0, 0.08)"
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                }
            ],
            series: [
                {
                    data: echartData.series,
                    showSymbol: false,
                    lineStyle: {
                        width: 1
                    },
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);
    }, [id, JSON.stringify(echartData)])
} 


export const useOtherLineEchartHooks = (id, echartData, lineColor, bcColors) => {

    useEffect(() => {
        let chartDom = document.getElementById(id);
        //如果获取不到元素就不渲染echarts
        if(!chartDom) {return;}

        let myChart = echarts.init(chartDom);

        myChart.width = chartDom.style.width;
        let option = {
            grid: {
                top: "6%",
                bottom: "12%",
                left:0,
                right: "9%"
            },
            
            color: [lineColor],
            xAxis: {
                type: 'category',
                data: echartData.xAxis,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(0, 0, 0, 0.08)"
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(0, 0, 0, 0.35)",
                        align: "left"
                    }
                },
            },
            yAxis: [
                {
                    type: 'value',
                    position: "right",
                    fontSize: 24,
                    splitLine: {
                        lineStyle: {
                            color: ["rgba(0, 0, 0, 0.15)"],
                            type: "dashed"
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0, 0, 0, 0.08)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(0, 0, 0, 0.35)"
                        }
                    },
                },
                {
                    type: 'value',
                    position: "left",
                    fontSize: 24,
                    splitLine: {
                        lineStyle: {
                            color: ["rgba(0, 0, 0, 0.15)"],
                            type: "dashed"
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0, 0, 0, 0.08)"
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                }
            ],
            series: [
                {
                    data: echartData.series,
                    showSymbol: false,
                    type: 'line',
                    lineStyle: {
                        width: 1
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: bcColors[0] 
                            },
                            {
                                offset: 1,
                                color: bcColors[1]
                            }
                        ])
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }, [id, JSON.stringify(echartData)])
} 